$(function(){

    // 1.添加静态布局
    // 2，渲染页面
    var pageSize = 5;
    var currentpage = 1;
    function render(){
        $.ajax({
            url:'/category/queryTopCategoryPaging',
            type:'get',
            data:{
                pageSize:pageSize,
                page:currentpage
            },
            dataType:'json',
            success:function(res){
                    // console.log(res);
                var htmlStr = template('temp',res)
                $('tbody').html(htmlStr)
                setPage(res.total)
                // console.log(currentpage);
            }
        })
    }
    render()
    
    // 3，添加分页
            // 引入插件-创建父盒子--动态创建page
            function setPage(total){
                $("#paginator").bootstrapPaginator({
                    bootstrapMajorVersion:3,//默认是2，如果是bootstrap3版本，这个参数必填
                    currentPage:currentpage,//当前页
                    totalPages:Math.ceil(total / pageSize),//总页数
                    size:"small",//设置控件的大小，mini, small, normal,large
                    onPageClicked:function(event, originalEvent, type,page){
                      //为按钮绑定点击事件 page:当前点击的按钮值
                    currentpage = page
                    // console.log(currentpage)
                    render()
                    }
              })
            }
            

        
        //使用表单校验插件
        $('#addform').bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [':disabled', ':hidden', ':not(:visible)'],
  
    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
  
    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
     categoryName: {
        validators: {
            notEmpty: {
                message: '请输入一级分类'
              }
        }
      }
    }
  
  })
  
// 点击添加按钮--隐藏模态框，渲染页面--ajax
        $('#addform').on('success.form.bv', function (e){
          e.preventDefault()
          $.ajax({
            url:'/category/addTopCategory',
            type:'post',
            data:$('#addform').serialize(),
            dataType:'json',
            success:function(res){
              // console.log(res);
              $('#myModal').modal('hide')
              render(res)
            }
          })
        })
    })